<template>
    <div>
        <el-row>
            <el-col :span="12"
            ><div class="grid-content">
                <v-chart :options="option1" :watchShallow="true" :auto-resize="true" :style="{ width: '100%', height: '100%' }" /></div
            ></el-col>
        </el-row>
        <el-row>
            <el-col :span="24">
                <div class="table-sty">
                    <el-table :data="tableData" style="width: 100%">
                        <el-table-column v-for="(value) in tableTitleList" :prop="value|pinyin" :label="value"> </el-table-column>
                    </el-table>
                </div>
            </el-col>
        </el-row>
    </div>
</template>
<script>
const pinyin = require("js-pinyin");
const chartTitle = "物业管理统计";
const optionList = ['维护保养费', '人工费', '日常消耗性支出', '设备采购与租赁费用'];
const monthList = ['12月', '11月', '10月', '9月', '8月', '7月'];
const optionMonthDataList = {};
optionMonthDataList[pinyin.getFullChars(optionList[0])] = [134020 , 129020 , 139000 , 135000 , 128000 , 13600];
optionMonthDataList[pinyin.getFullChars(optionList[1])] = [233500 , 234000 , 233500 , 234000 , 233500 , 234000];
optionMonthDataList[pinyin.getFullChars(optionList[2])] = [398120 , 387462 , 402948 , 378237 , 429080 , 324095];
optionMonthDataList[pinyin.getFullChars(optionList[3])] = [23042 , 23984 , 24973 , 25347 , 22483 , 22387];
const tableTitleList = ["月份"].concat(optionList);
const seriesDataList = [];
for (var olk in optionList){
    var optionName = optionList[olk];
    var nameAcronym = pinyin.getFullChars(optionName);
    seriesDataList.push({ name : optionName , data : optionMonthDataList[nameAcronym] , type :'bar'});
}
const tableListData = [];
const tableFirstColumn = pinyin.getFullChars(tableTitleList[0]);
for (var mlk in monthList){
    var obj = {};
    obj[tableFirstColumn] = monthList[mlk];
    for (var olk in optionList){
        var optionName = optionList[olk];
        var nameAcronym = pinyin.getFullChars(optionName);
        obj[nameAcronym] = optionMonthDataList[nameAcronym][mlk];
    }
    tableListData.push(obj);
}
export default {
    name: pinyin.getFullChars(chartTitle),
    filters : {
        pinyin : function (value){
            return pinyin.getFullChars(value);
        }
    },
    data() {
        return {
            tableTitleList : tableTitleList,
            option1: {
                title: {
                    text: chartTitle,
                    left: 'center'
                },
                xAxis: {
                    type: 'category',
                    data: monthList
                },
                yAxis: {
                    type: 'value'
                },
                legend: {
                    data: optionList,
                    bottom: 0
                },
                series: seriesDataList
            },
            tableData: tableListData
        };
    }
};
</script>
<style lang="scss" scoped>
.grid-content {
    height: 50vh;
    margin-top: 20px;
}
.table-sty {
    margin: 20px;
}
</style>
